<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<input id="ClickE" type="button" value="点击">
<input id="ConsultE" type="button" value="咨询">
<input id="MeetE" type="button" value="见面">
<input id="DealE" type="button" value="成交">
<!--<div id="main" style="width: 700px;height:400px;"></div>-->
<div id="main2" style="width: 700px;height:400px;"></div>
<script src="https://cdn.bootcss.com/echarts/3.6.1/echarts.min.js"></script>
<script>
    var tempClickCount = 0;
    var tempConsultCount = 0;
    var tempMeetCount = 0;
    var tempDealCount = 0;
    var clickCount = [];
    var consultCount = [];
    var meetCount = [];
    var dealCount = [];
    var xAxisData = [];
    for(var i = 0;i<10;i++){
        clickCount.push(0);
        consultCount.push(0);
        meetCount.push(0);
        dealCount.push(0);
    }
    var myChart2 = echarts.init(document.getElementById('main2'));
    option2 = {
        title : {
            text: '总计',
            x:'center'
        },
        tooltip : {
            trigger: 'item',
            formatter: "{a} <br/>{b} : {c} ({d}%)"
        },
        legend: {
            orient : 'vertical',
            x : 'left',
            data:['点击率', '咨询率', '见面率','成交率']
        },
        calculable : true,
        series : [
            {
                name:'详情',
                type:'pie',
                radius : '55%',
                center: ['50%', '60%'],
                data:[
                    {value:clickCount[9], name:'点击率'},
                    {value:clickCount[9], name:'咨询率'},
                    {value:clickCount[9], name:'见面率'},
                    {value:clickCount[9], name:'成交率'},
                ]
            }
        ]
    };
    myChart2.setOption(option2,true)
    document.getElementById("ClickE").addEventListener("click", function(){
        tempClickCount++;
        update();
    });
    document.getElementById("ConsultE").addEventListener("click", function(){
        tempConsultCount++;
        update();
    });
    document.getElementById("MeetE").addEventListener("click", function(){
        tempMeetCount++;
        update();
    });
    document.getElementById("DealE").addEventListener("click", function(){
        tempDealCount++;
        update();
    });
    function update(){
        clickCount.shift();
        consultCount.shift();
        meetCount.shift();
        dealCount.shift();
        xAxisData.shift();
        clickCount.push(tempClickCount);
        consultCount.push(tempConsultCount);
        meetCount.push(tempMeetCount);
        dealCount.push(tempDealCount);
        myChart2.setOption({
            title: {
                text: '总计',
                x: 'center'
            },
            tooltip: {
                trigger: 'item',
                formatter: "{a} <br/>{b} : {c} ({d}%)"
            },
            legend: {
                orient: 'vertical',
                x: 'left',
                data: ['点击率', '咨询率', '见面率', '成交率']
            },
            calculable: true,
            series: [
                {
                    name: '详情',
                    type: 'pie',
                    radius: '55%',
                    center: ['50%', '60%'],
                    data: [
                        {value: clickCount[9], name: '点击率'},
                        {value: consultCount[9], name: '咨询率'},
                        {value: meetCount[9], name: '见面率'},
                        {value: dealCount[9], name: '成交率'},
                    ]
                }
            ]
        });
    }
</script>
</body>
</html>